<script lang="ts" setup>
import Pagination from './demo/ThePagination.vue';
import Dropdown from './demo/TheDropdown.vue';
import Input from './demo/TheInput.vue';
import Select from './demo/TheSelect.vue';
import Table from './demo/TheTable.vue';
import Tabs from './demo/TheTabs.vue';
import Drawer from './demo/TheDrawer.vue';
import CheckBox from './demo/TheCheckbox.vue';
import Switch from './demo/TheSwitch.vue';
import Radio from './demo/TheRadio.vue';
import Breadcrumb from './demo/TheBreadcrumb.vue';
import Card from './demo/TheCard.vue';
import TheForm from './demo/TheForm.vue';

import { ElMessage } from 'element-plus';

function changeSwith(val: string) {
  ElMessage({
    type: val ? 'success' : 'error',
    message: 'openEuler',
    duration: 3000,
  });
}
</script>
<template>
  <div class="demo">
    <Pagination />
    <Dropdown />
    <Input />
    <Select />
    <Table />
    <Tabs />
    <Drawer />
    <CheckBox />
    <Radio />
    <Card />
    <el-empty description="No Data" :image-size="340" />
    <Breadcrumb />
    <Switch @change-switch="changeSwith" />
    <TheForm />
  </div>
</template>

<style scoped lang="scss">
.demo {
  padding-top: var(--o-gap-7);
  display: flex;
  flex-direction: column;
  gap: var(--o-gap-5) 0;
  overflow: hidden;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
